<!DOCTYPE html>
<html lang="en" dir="ltr" class="scroll-smooth" data-default-appearance="dark"
  data-auto-appearance="true"><head>
  <meta charset="utf-8" />
  
  <meta http-equiv="content-language" content="en" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  
  <title>Vue3 响应式Api开发笔记 &middot; 春江花朝秋月夜</title>
  <meta name="title" content="Vue3 响应式Api开发笔记 &middot; 春江花朝秋月夜" />
  
  <meta name="description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS." />
  <meta name="keywords" content="vue, " />
  
  
  <link rel="canonical" href="/entire-note/vue/" />
  
  
  
  
  
  
  
  
  
  
  <link type="text/css" rel="stylesheet" href="/css/main.bundle.min.4d4b1b35ed4fb37d198f5f4fa732e64404b535101cdef4401ac22e7c91380b82f3c8e5d51ae61f0149e6a95694c77e5a40943ca8480609a230c10f33c1fc11b4.css"
    integrity="sha512-TUsbNe1Ps30Zj19PpzLmRAS1NRAc3vRAGsIufJE4C4LzyOXVGuYfAUnmqVaUx35aQJQ8qEgGCaIwwQ8zwfwRtA==" />
  
  
  <script type="text/javascript" src="/js/appearance.min.516a16745bea5a9bd011138d254cc0fd3973cd55ce6e15f3dec763e7c7c2c7448f8fe7b54cca811cb821b0c7e12cd161caace1dd794ac3d34d40937cbcc9ee12.js"
    integrity="sha512-UWoWdFvqWpvQERONJUzA/TlzzVXObhXz3sdj58fCx0SPj&#43;e1TMqBHLghsMfhLNFhyqzh3XlKw9NNQJN8vMnuEg=="></script>
  
  
  
  
  
  
  
  
  
  
  
  
  <script defer type="text/javascript" id="script-bundle" src="/js/main.bundle.min.f0ecd26160d4c29256b0f2b96ebe0be0f1c839488a839c5190ed198437fe5a1bd0ede0c86f0108806fd0ea43c987923aa4a63fe7ed09813eb9e8ad531ca58ae4.js"
    integrity="sha512-8OzSYWDUwpJWsPK5br4L4PHIOUiKg5xRkO0ZhDf&#43;WhvQ7eDIbwEIgG/Q6kPJh5I6pKY/5&#43;0JgT656K1THKWK5A==" data-copy="" data-copied=""></script>
  
  <script src="/js/zoom.min.js"></script>
  
  
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="manifest" href="/site.webmanifest" />
  
  
  
  
  
  
  
  <meta property="og:title" content="Vue3 响应式Api开发笔记" />
<meta property="og:description" content="Vue3 响应式Api开发笔记 # 目录结构： # 用vite构建的Vue3目录结构：
src:
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。 index.css: 样式文件。 static	静态资源目录，如图片、字体等。
public	公共资源目录。
package.json	项目配置文件。
vue3创建应用 # 实际案例 # 语法： const app = Vue." />
<meta property="og:type" content="article" />
<meta property="og:url" content="/entire-note/vue/" /><meta property="og:image" content="/entire-note/vue/featured.png"/><meta property="article:section" content="entire-note" />
<meta property="article:published_time" content="2023-11-04T11:31:54+08:00" />
<meta property="article:modified_time" content="2023-11-04T11:31:54+08:00" />

  <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="/entire-note/vue/featured.png"/>
<meta name="twitter:title" content="Vue3 响应式Api开发笔记"/>
<meta name="twitter:description" content="Vue3 响应式Api开发笔记 # 目录结构： # 用vite构建的Vue3目录结构：
src:
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。 index.css: 样式文件。 static	静态资源目录，如图片、字体等。
public	公共资源目录。
package.json	项目配置文件。
vue3创建应用 # 实际案例 # 语法： const app = Vue."/>

  
  <script type="application/ld+json">
  [{
    "@context": "https://schema.org",
    "@type": "Article",
    "articleSection": "Entire-notes",
    "name": "Vue3 响应式Api开发笔记",
    "headline": "Vue3 响应式Api开发笔记",
    
    "abstract": "Vue3 响应式Api开发笔记 # 目录结构： # 用vite构建的Vue3目录结构：\nsrc:\n这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：\nassets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。 index.css: 样式文件。 static\t静态资源目录，如图片、字体等。\npublic\t公共资源目录。\npackage.json\t项目配置文件。\nvue3创建应用 # 实际案例 # 语法： const app = Vue.",
    "inLanguage": "en",
    "url" : "\/entire-note\/vue\/",
    "author" : {
      "@type": "Person",
      "name": "春江花朝秋月夜"
    },
    "copyrightYear": "2023",
    "dateCreated": "2023-11-04T11:31:54\u002b08:00",
    "datePublished": "2023-11-04T11:31:54\u002b08:00",
    
    "dateModified": "2023-11-04T11:31:54\u002b08:00",
    
    "keywords": ["vue"],
    
    "mainEntityOfPage": "true",
    "wordCount": "322"
  }]
  </script>


  
  
  <meta name="author" content="春江花朝秋月夜" />
  
  
  
  <link href="https://space.bilibili.com/159283119?spm_id_from=333.1007.0.0" rel="me" />
  
  
  <link href="https://github.com/ToDreamr" rel="me" />
  
  
  
  

<script src="/lib/jquery/jquery.slim.min.js" integrity=""></script>


















  
  

<script async src="https://www.googletagmanager.com/gtag/js?id=G-PEDMYR1V0K"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-PEDMYR1V0K');
</script>

  
  
  <meta name="theme-color"/>
  
  
</head>
<body
  class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32">
  <div id="the-top" class="absolute flex self-center">
    <a class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
      href="#main-content"><span
        class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>Skip to main content</a>
  </div>
  
  
  <div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px]" style="z-index:100">
  <div id="menu-blur" class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div>
  <div class="relative max-w-[64rem] ml-auto mr-auto">
    <div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
    class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
    
    
    
    <div>
        <a href="/" class="flex">
            <span class="sr-only">春江花朝秋月夜</span>

            <img src="/img/author.png" width="16" height="16"
                class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" alt="春江花朝秋月夜" />

        </a>
    </div>
    
    <div class="flex flex-1 items-center justify-between">
        <nav class="flex space-x-3">

            <a href="/" class="text-base font-medium text-gray-500 hover:text-gray-900">春江花朝秋月夜</a>


        </nav>
        <nav class="hidden md:flex items-center space-x-5 md:ml-12 h-12">

            
            
            
  <a href="/"  class="flex items-center">
    
    <p class="text-base font-medium text-gray-500 hover:text-gray-900" title="">
        首页
    </p>
</a>


            
            
  <a href="/tags/%E7%AC%94%E8%AE%B0/"  class="flex items-center">
    
    <p class="text-base font-medium text-gray-500 hover:text-gray-900" title="笔记">
        笔记
    </p>
</a>


            
            
  <a href="/tasks/"  class="flex items-center">
    
    <p class="text-base font-medium text-gray-500 hover:text-gray-900" title="学习计划">
        事项
    </p>
</a>


            
            
  <a href="/all/"  class="flex items-center">
    
    <p class="text-base font-medium text-gray-500 hover:text-gray-900" title="全部">
        全部
    </p>
</a>


            
            
  <a href="/tags/"  class="flex items-center">
    
    <p class="text-base font-medium text-gray-500 hover:text-gray-900" title="Tags">
        系列文章
    </p>
</a>


            
            
  <a href="/friend/"  class="flex items-center">
    
    <p class="text-base font-medium text-gray-500 hover:text-gray-900" title="Hello">
        友链
    </p>
</a>


            
            

            


            
            <button id="search-button" aria-label="Search" class="text-base hover:text-primary-600 dark:hover:text-primary-400 h-12"
                title="">
                

  <span class="relative block icon">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>

  </span>


            </button>
            


            
            
            <div
                class="ltr:mr-14 rtl:ml-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400">
                <button id="appearance-switcher" aria-label="Dark mode switcher" type="button">
                    <div class="flex items-center justify-center h-12 dark:hidden">
                        

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"/></svg>

  </span>


                    </div>
                    <div class="items-center justify-center hidden h-12 dark:flex">
                        

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"/></svg>

  </span>


                    </div>
                </button>
            </div>
            

        </nav>
        <div class="flex md:hidden items-center space-x-5 md:ml-12">

            <span></span>

            


            
            <button id="search-button-mobile" aria-label="Search" class="text-base hover:text-primary-600 dark:hover:text-primary-400"
                title="">
                

  <span class="relative block icon">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>

  </span>


            </button>
            

            
            
            <button id="appearance-switcher-mobile" aria-label="Dark mode switcher" type="button" style="margin-right:5px">
                <div class="flex items-center justify-center h-12 dark:hidden">
                    

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"/></svg>

  </span>


                </div>
                <div class="items-center justify-center hidden h-12 dark:flex">
                    

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"/></svg>

  </span>


                </div>
            </button>
            

        </div>
    </div>
    <div class="-my-2 -mr-2 md:hidden">

        <label id="menu-button" for="menu-controller" class="block">
            <input type="checkbox" id="menu-controller" class="hidden" />
            <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
                

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg>

  </span>


            </div>
            <div id="menu-wrapper" style="padding-top:5px;"
                class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
                <ul
                    class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">

                    <li>
                        <span
                            class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>

  </span>

</span>
                    </li>

                    
                    

                    
  <li class="mt-1">
    <a href="/"  class="flex items-center">
        
        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="">
            首页
        </p>
    </a>
</li>



                    

                    
  <li class="mt-1">
    <a href="/tags/%E7%AC%94%E8%AE%B0/"  class="flex items-center">
        
        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="笔记">
            笔记
        </p>
    </a>
</li>



                    

                    
  <li class="mt-1">
    <a href="/tasks/"  class="flex items-center">
        
        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="学习计划">
            事项
        </p>
    </a>
</li>



                    

                    
  <li class="mt-1">
    <a href="/all/"  class="flex items-center">
        
        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="全部">
            全部
        </p>
    </a>
</li>



                    

                    
  <li class="mt-1">
    <a href="/tags/"  class="flex items-center">
        
        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="Tags">
            系列文章
        </p>
    </a>
</li>



                    

                    
  <li class="mt-1">
    <a href="/friend/"  class="flex items-center">
        
        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="Hello">
            友链
        </p>
    </a>
</li>



                    
                    

                </ul>
                

            </div>
        </label>
    </div>
</div>




<script>
    (function () {
        var $mainmenu = $('.main-menu');
        var path = window.location.pathname;
        $mainmenu.find('a[href="' + path + '"]').each(function (i, e) {
            $(e).children('p').addClass('active');
        });
    })();
</script>


  </div>
</div>
<script>
  window.addEventListener('scroll', function (e) {
    var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var background_blur = document.getElementById('menu-blur');
    background_blur.style.opacity = (scroll / 300);
  });
</script>

  
  <div class="relative flex flex-col grow">
    <main id="main-content" class="grow">
      


<article>
    
    
    
    
    
    


<div id="hero" class="h-[150px] md:h-[200px]"></div>


    
    <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
    style="background-image:url(/entire-note/vue/featured_hud4e391f196043a7dcc8dd215f8298dc5_96858_1200x0_resize_box_3.png);">
    


    <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
    </div>
    <div
        class="absolute inset-0 opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal">
    </div>
</div>

    
    

    <header id="single_header" class="mt-5 max-w-prose">
        
        <ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden">
  
  
    
  
    
  
  <li class="inline hidden">
    <a
      class="hover:underline decoration-neutral-300 dark:underline-neutral-600"
      href="/"
      ></a
    ><span class="px-1 text-primary-500">/</span>
  </li>

  
  <li class="inline ">
    <a
      class="hover:underline decoration-neutral-300 dark:underline-neutral-600"
      href="/entire-note/"
      >Entire-notes</a
    ><span class="px-1 text-primary-500">/</span>
  </li>

  
  <li class="inline hidden">
    <a
      class="hover:underline decoration-neutral-300 dark:underline-neutral-600"
      href="/entire-note/vue/"
      >Vue3 响应式Api开发笔记</a
    ><span class="px-1 text-primary-500">/</span>
  </li>

</ol>


        
        <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral" style="font-family: 华文中宋,serif">
            Vue3 响应式Api开发笔记
        </h1>
        <div class="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
            






































<div class="flex flex-row flex-wrap items-center">
  
  
  <span title="Reading time">2 mins</span><span class="px-2 text-primary-500">&middot;</span><span>
    
    <span id="views_entire-note\vue\index.md" title="views">0</span> 
    
    <span class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg>
  </span>

</span>
</span><span class="px-2 text-primary-500">&middot;</span><span>
    
    <span id="likes_entire-note\vue\index.md" title="likes">0</span> 
    
    <span class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>
  </span>

</span>
</span><span class="px-2 text-primary-500">&middot;</span><span>
    <button id="likes_button"
        class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
        onclick="process_article()">
        <span id="likes_button_heart" style="display:none" class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>
  </span>

 </span>
        <span id="likes_button_emtpty_heart" class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"/></svg>
  </span>

</span>
        <span id="likes_button_text">&nbsp;Like</span>
    </button>
</span>
  

  
  
</div>


<div class="flex flex-row flex-wrap items-center">
  
  
  
  
  
  
  
  
  
  
  
</div>




<div class="flex flex-row flex-wrap items-center">
  
  
  
  
  
  
  
  
  
  
  
  
  <span style="margin-top:0.5rem" class="mr-2" onclick="window.open(&#34;/tags/vue/&#34;,'_self');">
    <span class="flex">
  <span
    class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
  >
    vue
  </span>
</span>

  </span>
  
  
  
  
</div>



        </div>

        
        
        
        
        

        
        
        
<div class="flex">
  
  
  
  
  
  
  <img class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" width="96" height="96"
    alt="春江花朝秋月夜" src="/img/default_hud65e42c374bcd9580abb2944fca98866_909698_192x192_fill_box_center_3.png" />
  
  
  <div class="place-self-center">
    
    <div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
      Author
    </div>
    <div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
      春江花朝秋月夜
    </div>
    
    
    <div class="text-sm text-neutral-700 dark:text-neutral-400">重湖叠𪩘清嘉。有三秋桂子，十里荷花。羌管弄晴，菱歌泛夜，嬉嬉钓叟莲娃。千骑拥高牙。乘醉听箫鼓，吟赏烟霞。异日图将好景，归去凤池夸。</div>
    
    <div class="text-2xl sm:text-lg">
  <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
    
      
        <a
          class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
          href="https://space.bilibili.com/159283119?spm_id_from=333.1007.0.0"
          target="_blank"
          aria-label="Bilibili"
          rel="me noopener noreferrer"
          ><span class="inline-block align-text-bottom">

  <span class="relative block icon">
    <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699377062375" class="icon" viewBox="0 0 1129 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4167" xmlns:xlink="http://www.w3.org/1999/xlink" width="220.5078125" height="200"><path d="M234.909 9.656a80.468 80.468 0 0 1 68.398 0 167.374 167.374 0 0 1 41.843 30.578l160.937 140.82h115.07l160.936-140.82a168.983 168.983 0 0 1 41.843-30.578A80.468 80.468 0 0 1 930.96 76.445a80.468 80.468 0 0 1-17.703 53.914 449.818 449.818 0 0 1-35.406 32.187 232.553 232.553 0 0 1-22.531 18.508h100.585a170.593 170.593 0 0 1 118.289 53.109 171.397 171.397 0 0 1 53.914 118.288v462.693a325.897 325.897 0 0 1-4.024 70.007 178.64 178.64 0 0 1-80.468 112.656 173.007 173.007 0 0 1-92.539 25.75h-738.7a341.186 341.186 0 0 1-72.421-4.024A177.835 177.835 0 0 1 28.91 939.065a172.202 172.202 0 0 1-27.36-92.539V388.662a360.498 360.498 0 0 1 0-66.789A177.03 177.03 0 0 1 162.487 178.64h105.414c-16.899-12.07-31.383-26.555-46.672-39.43a80.468 80.468 0 0 1-25.75-65.984 80.468 80.468 0 0 1 39.43-63.57M216.4 321.873a80.468 80.468 0 0 0-63.57 57.937 108.632 108.632 0 0 0 0 30.578v380.615a80.468 80.468 0 0 0 55.523 80.469 106.218 106.218 0 0 0 34.601 5.632h654.208a80.468 80.468 0 0 0 76.444-47.476 112.656 112.656 0 0 0 8.047-53.109v-354.06a135.187 135.187 0 0 0 0-38.625 80.468 80.468 0 0 0-52.304-54.719 129.554 129.554 0 0 0-49.89-7.242H254.22a268.764 268.764 0 0 0-37.82 0z m0 0" fill="#20B0E3" p-id="4168"></path><path d="M348.369 447.404a80.468 80.468 0 0 1 55.523 18.507 80.468 80.468 0 0 1 28.164 59.547v80.468a80.468 80.468 0 0 1-16.094 51.5 80.468 80.468 0 0 1-131.968-9.656 104.609 104.609 0 0 1-10.46-54.719v-80.468a80.468 80.468 0 0 1 70.007-67.593z m416.02 0a80.468 80.468 0 0 1 86.102 75.64v80.468a94.148 94.148 0 0 1-12.07 53.11 80.468 80.468 0 0 1-132.773 0 95.757 95.757 0 0 1-12.875-57.133V519.02a80.468 80.468 0 0 1 70.007-70.812z m0 0" fill="#20B0E3" p-id="4169"></path></svg>
  </span>

</span></a
        >
      
    
      
        <a
          class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
          href="https://github.com/ToDreamr"
          target="_blank"
          aria-label="Github"
          rel="me noopener noreferrer"
          ><span class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>

  </span>

</span></a
        >
      
    
  </div>

</div>
  </div>
</div>
        

        

        

        
        <div class="mb-5"></div>
        

    </header>

    <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row" style="width: 100%">

        
        <div
            class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
        <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-[140px]">

         <details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
  <summary
    class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
    Table of Contents
  </summary>
  <div
    class="min-w-[220px] py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#vue3-响应式api开发笔记">Vue3 响应式Api开发笔记</a>
      <ul>
        <li><a href="#目录结构">目录结构：</a></li>
        <li><a href="#vue3创建应用">vue3创建应用</a>
          <ul>
            <li>
              <ul>
                <li>
                  <ul>
                    <li><a href="#实际案例">实际案例</a></li>
                    <li><a href="#data选项">data选项</a></li>
                    <li><a href="#setup选项">setup选项</a>
                      <ul>
                        <li><a href="#setup语法糖">setup语法糖</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="#reactive和ref">reactive和ref</a></li>
                <li><a href="#组合式api-computed">组合式API-computed</a></li>
                <li><a href="#watch函数">watch函数</a>
                  <ul>
                    <li>
                      <ul>
                        <li><a href="#立即执行immediatetrue">立即执行：immediate:true</a></li>
                        <li><a href="#深层监视deeptrue-所有属性都将会被监听">深层监视：deep:true 所有属性都将会被监听</a></li>
                        <li><a href="#修改才出发监听的回调函数">修改才出发监听的回调函数：</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="#生命周期函数">生命周期函数</a></li>
                <li><a href="#父子通信">父子通信</a>
                  <ul>
                    <li><a href="#子组件传递事件给父组件">子组件传递事件给父组件</a></li>
                  </ul>
                </li>
                <li><a href="#模板引用">模板引用</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>
  </div>
</details>
<details class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden">
  <summary
    class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
    Table of Contents
  </summary>
  <div
    class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#vue3-响应式api开发笔记">Vue3 响应式Api开发笔记</a>
      <ul>
        <li><a href="#目录结构">目录结构：</a></li>
        <li><a href="#vue3创建应用">vue3创建应用</a>
          <ul>
            <li>
              <ul>
                <li>
                  <ul>
                    <li><a href="#实际案例">实际案例</a></li>
                    <li><a href="#data选项">data选项</a></li>
                    <li><a href="#setup选项">setup选项</a>
                      <ul>
                        <li><a href="#setup语法糖">setup语法糖</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="#reactive和ref">reactive和ref</a></li>
                <li><a href="#组合式api-computed">组合式API-computed</a></li>
                <li><a href="#watch函数">watch函数</a>
                  <ul>
                    <li>
                      <ul>
                        <li><a href="#立即执行immediatetrue">立即执行：immediate:true</a></li>
                        <li><a href="#深层监视deeptrue-所有属性都将会被监听">深层监视：deep:true 所有属性都将会被监听</a></li>
                        <li><a href="#修改才出发监听的回调函数">修改才出发监听的回调函数：</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="#生命周期函数">生命周期函数</a></li>
                <li><a href="#父子通信">父子通信</a>
                  <ul>
                    <li><a href="#子组件传递事件给父组件">子组件传递事件给父组件</a></li>
                  </ul>
                </li>
                <li><a href="#模板引用">模板引用</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>
  </div>
</details>

 
<script>
  (function () {
    var $toc = $('#TableOfContents');
    if ($toc.length > 0) {
      var $window = $(window);

      function onScroll() {
        var currentScroll = $window.scrollTop();
        var h = $('.anchor');
        var id = "";
        h.each(function (i, e) {
          e = $(e);
          if (e.offset().top - $(window).height()/3 <= currentScroll) {
            id = e.attr('id');
          }
        });
        var active = $toc.find('a.active');      
        if (active.length == 1 && active.eq(0).attr('href') == '#' + id) return true;

        active.each(function (i, e) {
          
            $(e).removeClass('active');
          
        });
        $toc.find('a[href="#' + id + '"]').addClass('active')
        $toc.find('a[href="#' + id + '"]').parentsUntil('#TableOfContents').each(function (i, e) {
          $(e).children('a').parents('ul').show();          
        });
      }

      $window.on('scroll', onScroll);
      $(document).ready(function () {
        
        onScroll();
      });
    }
  })();
</script>
   </div>
        </div>
        

        <div class="min-w-0 min-h-0 max-w-fit">
            


            <div style="width: 100%">
                <div id="vue3-响应式api开发笔记" class="anchor"></div>
<h1 class="relative group">Vue3 响应式Api开发笔记 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#vue3-%e5%93%8d%e5%ba%94%e5%bc%8fapi%e5%bc%80%e5%8f%91%e7%ac%94%e8%ae%b0" aria-label="Anchor">#</a></span>        
    
</h1>
<div id="目录结构" class="anchor"></div>
<h2 class="relative group">目录结构： 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84" aria-label="Anchor">#</a></span>        
    
</h2>
<p>用vite构建的Vue3目录结构：</p>
<p>




  
  
    
  
  
    <figure>
      
      <img
        class="my-0 rounded-md"
        srcset="
        /entire-note/vue/img_hua496de023f6987bbeaf0b2ae7093aaea_35997_330x0_resize_box_3.png 330w,
        /entire-note/vue/img_hua496de023f6987bbeaf0b2ae7093aaea_35997_660x0_resize_box_3.png 660w,
        /entire-note/vue/img_hua496de023f6987bbeaf0b2ae7093aaea_35997_1024x0_resize_box_3.png 1024w,
        /entire-note/vue/img_hua496de023f6987bbeaf0b2ae7093aaea_35997_1320x0_resize_box_3.png 2x"
        src="/entire-note/vue/img_hua496de023f6987bbeaf0b2ae7093aaea_35997_660x0_resize_box_3.png"
        alt="img.png"
      />
      
      
    </figure>
  

</p>
<p>src:</p>
<p>这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：</p>
<ul>
<li>assets: 放置一些图片，如logo等。</li>
<li>components: 目录里面放了一个组件文件，可以不用。</li>
<li>App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。</li>
<li>main.js: 项目的核心文件。</li>
<li>index.css: 样式文件。</li>
</ul>
<p>static	静态资源目录，如图片、字体等。</p>
<p>public	公共资源目录。</p>
<p>package.json	项目配置文件。</p>
<div id="vue3创建应用" class="anchor"></div>
<h2 class="relative group">vue3创建应用 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#vue3%e5%88%9b%e5%bb%ba%e5%ba%94%e7%94%a8" aria-label="Anchor">#</a></span>        
    
</h2>
<div id="实际案例" class="anchor"></div>
<h5 class="relative group">实际案例 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#%e5%ae%9e%e9%99%85%e6%a1%88%e4%be%8b" aria-label="Anchor">#</a></span>        
    
</h5>
<ul>
<li>语法： const app = Vue.createApp({ /* 选项 */ })</li>
</ul>
<p>传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。</p>
<p>案例：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-vue" data-lang="vue"><span style="display:flex;"><span><span style="color:#a6e22e">Vue</span>.<span style="color:#a6e22e">createApp</span>(<span style="color:#a6e22e">HelloVueApp</span>).<span style="color:#a6e22e">mount</span>(<span style="color:#e6db74">&#39;#hello-vue&#39;</span>)
</span></span><span style="display:flex;"><span><span style="color:#75715e">//createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。
</span></span></span></code></pre></div><p>一个应用需要被挂载到一个 DOM 元素中，以上代码使用 mount(&rsquo;#hello-vue&rsquo;) 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中。</p>
<p>也就是说vue3是把应用程序挂载到mount下面的节点上的，作为渲染页面的起点</p>
<div id="data选项" class="anchor"></div>
<h5 class="relative group">data选项 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#data%e9%80%89%e9%a1%b9" aria-label="Anchor">#</a></span>        
    
</h5>
<p>data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。</p>
<div id="setup选项" class="anchor"></div>
<h5 class="relative group">setup选项 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#setup%e9%80%89%e9%a1%b9" aria-label="Anchor">#</a></span>        
    
</h5>
<p>setup创建非常前面：</p>
<p>




  
  
    
  
  
    <figure>
      
      <img
        class="my-0 rounded-md"
        srcset="
        /entire-note/vue/img_2_hu166dfc746f54709a846bae9c4836887d_44632_330x0_resize_box_3.png 330w,
        /entire-note/vue/img_2_hu166dfc746f54709a846bae9c4836887d_44632_660x0_resize_box_3.png 660w,
        /entire-note/vue/img_2_hu166dfc746f54709a846bae9c4836887d_44632_1024x0_resize_box_3.png 1024w,
        /entire-note/vue/img_2_hu166dfc746f54709a846bae9c4836887d_44632_1320x0_resize_box_3.png 2x"
        src="/entire-note/vue/img_2_hu166dfc746f54709a846bae9c4836887d_44632_660x0_resize_box_3.png"
        alt="img_2.png"
      />
      
      
    </figure>
  

</p>
<p>因此在setup中将不能使用this关键字</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-vue" data-lang="vue"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> &gt;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ref</span>,<span style="color:#a6e22e">reactive</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;vue&#34;</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;HelloWorld&#39;</span>,
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">setup</span>(){
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">msg</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;Hello World&#39;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">color</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;red&#39;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">age</span><span style="color:#f92672">=</span><span style="color:#a6e22e">ref</span>(<span style="color:#ae81ff">20</span>)
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">//声明对象：
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">Person</span><span style="color:#f92672">=</span><span style="color:#a6e22e">reactive</span>({
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;小明&#34;</span>,
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">age</span><span style="color:#f92672">:</span><span style="color:#ae81ff">20</span>,
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">school</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;HNUST&#39;</span>
</span></span><span style="display:flex;"><span>    })
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span>{<span style="color:#a6e22e">msg</span>,<span style="color:#a6e22e">color</span>,<span style="color:#a6e22e">age</span>,<span style="color:#a6e22e">Person</span>}
</span></span><span style="display:flex;"><span>  },
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">template</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">h1</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;color: red;text-align: center&#34;</span>&gt;{{<span style="color:#a6e22e">msg</span>}},<span style="color:#a6e22e">我今年</span>{{<span style="color:#a6e22e">age</span>}}<span style="color:#a6e22e">岁啦</span><span style="color:#960050;background-color:#1e0010">！</span>&lt;/<span style="color:#f92672">h1</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">br</span>/&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">h2</span>&gt;{{<span style="color:#a6e22e">Person</span>}}&lt;/<span style="color:#f92672">h2</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">template</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">style</span> <span style="color:#a6e22e">scoped</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">style</span>&gt;
</span></span></code></pre></div><p>




  
  
    
  
  
    <figure>
      
      <img
        class="my-0 rounded-md"
        srcset="
        /entire-note/vue/img_1_hu1d3f795c71856e2cc145c1aa3050ec63_10192_330x0_resize_box_3.png 330w,
        /entire-note/vue/img_1_hu1d3f795c71856e2cc145c1aa3050ec63_10192_660x0_resize_box_3.png 660w,
        /entire-note/vue/img_1_hu1d3f795c71856e2cc145c1aa3050ec63_10192_1024x0_resize_box_3.png 1024w,
        /entire-note/vue/img_1_hu1d3f795c71856e2cc145c1aa3050ec63_10192_1320x0_resize_box_3.png 2x"
        src="/entire-note/vue/img_1_hu1d3f795c71856e2cc145c1aa3050ec63_10192_660x0_resize_box_3.png"
        alt="img_1.png"
      />
      
      
    </figure>
  

</p>
<p>所有的变量（数据或者函数）都必须返回出去才可以使用</p>
<div id="setup语法糖" class="anchor"></div>
<h6 class="relative group">setup语法糖 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#setup%e8%af%ad%e6%b3%95%e7%b3%96" aria-label="Anchor">#</a></span>        
    
</h6>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-vue" data-lang="vue"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">setup</span>&gt;
</span></span><span style="display:flex;"><span><span style="color:#75715e">//不需要手动return，写入内部将会自动return
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>&lt;/<span style="color:#f92672">script</span>&gt;
</span></span></code></pre></div><div id="reactive和ref" class="anchor"></div>
<h4 class="relative group">reactive和ref 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#reactive%e5%92%8cref" aria-label="Anchor">#</a></span>        
    
</h4>
<p>默认情况下，数据并不是响应式的数据，需要通过这两个关键字来声明响应式数据</p>
<p>




  
  
    
  
  
    <figure>
      
      <img
        class="my-0 rounded-md"
        srcset="
        /entire-note/vue/img_3_hu61c233dad1fec0ea29cfafbf02fbb0df_136532_330x0_resize_box_3.png 330w,
        /entire-note/vue/img_3_hu61c233dad1fec0ea29cfafbf02fbb0df_136532_660x0_resize_box_3.png 660w,
        /entire-note/vue/img_3_hu61c233dad1fec0ea29cfafbf02fbb0df_136532_1024x0_resize_box_3.png 1024w,
        /entire-note/vue/img_3_hu61c233dad1fec0ea29cfafbf02fbb0df_136532_1320x0_resize_box_3.png 2x"
        src="/entire-note/vue/img_3_hu61c233dad1fec0ea29cfafbf02fbb0df_136532_660x0_resize_box_3.png"
        alt="img_3.png"
      />
      
      
    </figure>
  

</p>
<p>对象类型：reactive返回响应式对象</p>
<p>基本数据：ref包了一层对象，访问数据需要通过.value,template访问时不需要</p>
<p>建议声明数据用ref，无论对象还是原始数据</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-vue" data-lang="vue"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">xmlns</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;http://www.w3.org/1999/html&#34;</span> <span style="color:#a6e22e">setup</span>&gt;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ref</span>, <span style="color:#a6e22e">reactive</span>, <span style="color:#a6e22e">watch</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;vue&#34;</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;WatchParam&#39;</span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span>  <span style="color:#a6e22e">count</span><span style="color:#f92672">=</span><span style="color:#a6e22e">ref</span>(<span style="color:#ae81ff">0</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span>  <span style="color:#a6e22e">clickTimes</span><span style="color:#f92672">=</span><span style="color:#a6e22e">ref</span>(<span style="color:#ae81ff">0</span>);
</span></span><span style="display:flex;"><span>     <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">button</span>(){
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">clickTimes</span>.<span style="color:#a6e22e">value</span><span style="color:#f92672">++</span>;
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">clickTimes</span>)
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">//监听普通变量：
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#a6e22e">watch</span>(<span style="color:#a6e22e">clickTimes</span>,(<span style="color:#a6e22e">newV</span>,<span style="color:#a6e22e">OldV</span>)=&gt;{
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">count</span>.<span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#a6e22e">newV</span>
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">count</span>)
</span></span><span style="display:flex;"><span>    })
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">template</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">button</span> <span style="color:#f92672">@click</span><span style="color:#e6db74">=&#34;button&#34;</span>&gt;<span style="color:#a6e22e">点击这个</span> <span style="color:#960050;background-color:#1e0010">+</span><span style="color:#a6e22e">1</span>&lt;/<span style="color:#f92672">button</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">br</span>/&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">h3</span>&gt;{{<span style="color:#a6e22e">clickTimes</span>}}&lt;/<span style="color:#f92672">h3</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">br</span>/&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">h3</span>&gt;{{<span style="color:#a6e22e">count</span>}}&lt;/<span style="color:#f92672">h3</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">template</span>&gt;
</span></span></code></pre></div><div id="组合式api-computed" class="anchor"></div>
<h4 class="relative group">组合式API-computed 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#%e7%bb%84%e5%90%88%e5%bc%8fapi-computed" aria-label="Anchor">#</a></span>        
    
</h4>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-vue" data-lang="vue"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">setup</span>&gt;
</span></span><span style="display:flex;"><span><span style="color:#75715e">//计算属性
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">computed</span>, <span style="color:#a6e22e">ref</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;vue&#34;</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">list</span><span style="color:#f92672">=</span><span style="color:#a6e22e">ref</span>([<span style="color:#ae81ff">1</span>,<span style="color:#ae81ff">2</span>,<span style="color:#ae81ff">3</span>,<span style="color:#ae81ff">4</span>,<span style="color:#ae81ff">5</span>,<span style="color:#ae81ff">6</span>,<span style="color:#ae81ff">7</span>,<span style="color:#ae81ff">8</span>])
</span></span><span style="display:flex;"><span><span style="color:#75715e">//基于list派生数据
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">res</span><span style="color:#f92672">=</span><span style="color:#a6e22e">computed</span>(()=&gt;{
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">list</span>.<span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">filter</span>(<span style="color:#a6e22e">item</span> =&gt;<span style="color:#a6e22e">item</span><span style="color:#f92672">&gt;</span><span style="color:#ae81ff">4</span>)
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span><span style="color:#f92672">=</span><span style="color:#a6e22e">ref</span>([])
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span>  <span style="color:#a6e22e">additem</span><span style="color:#f92672">=</span>()=&gt;{
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">push</span>(<span style="color:#e6db74">&#34;科目三必过&#34;</span>)
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">template</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">h3</span>&gt;{{<span style="color:#a6e22e">list</span>}}&lt;/<span style="color:#f92672">h3</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">br</span>/&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">h3</span>&gt;{{<span style="color:#a6e22e">res</span>}}&lt;/<span style="color:#f92672">h3</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">br</span>/&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">h3</span>&gt;{{<span style="color:#a6e22e">arr</span>}}&lt;/<span style="color:#f92672">h3</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">br</span>/&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">button</span> <span style="color:#f92672">@click</span><span style="color:#e6db74">=&#34;additem&#34;</span>&gt;<span style="color:#a6e22e">点击添加数据</span>&lt;/<span style="color:#f92672">button</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">template</span>&gt;
</span></span></code></pre></div><p>要求：计算属性不要去处理请求和修稿dom树</p>
<div id="watch函数" class="anchor"></div>
<h4 class="relative group">watch函数 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#watch%e5%87%bd%e6%95%b0" aria-label="Anchor">#</a></span>        
    
</h4>
<p>侦察单个元素或者一个对象，同时侦听多个数据也可</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-vue" data-lang="vue"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">setup</span>&gt;
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">watch</span>([<span style="color:#a6e22e">clickTimes</span>,<span style="color:#a6e22e">count</span>],(<span style="color:#a6e22e">newV</span>,<span style="color:#a6e22e">OldV</span>)=&gt;{
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">count</span>.<span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#a6e22e">newV</span>
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">OldV</span>)
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">count</span>)
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;
</span></span></code></pre></div><div id="立即执行immediatetrue" class="anchor"></div>
<h6 class="relative group">立即执行：immediate:true 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#%e7%ab%8b%e5%8d%b3%e6%89%a7%e8%a1%8cimmediatetrue" aria-label="Anchor">#</a></span>        
    
</h6>
<div id="深层监视deeptrue-所有属性都将会被监听" class="anchor"></div>
<h6 class="relative group">深层监视：deep:true 所有属性都将会被监听 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#%e6%b7%b1%e5%b1%82%e7%9b%91%e8%a7%86deeptrue-%e6%89%80%e6%9c%89%e5%b1%9e%e6%80%a7%e9%83%bd%e5%b0%86%e4%bc%9a%e8%a2%ab%e7%9b%91%e5%90%ac" aria-label="Anchor">#</a></span>        
    
</h6>
<div id="修改才出发监听的回调函数" class="anchor"></div>
<h6 class="relative group">修改才出发监听的回调函数： 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#%e4%bf%ae%e6%94%b9%e6%89%8d%e5%87%ba%e5%8f%91%e7%9b%91%e5%90%ac%e7%9a%84%e5%9b%9e%e8%b0%83%e5%87%bd%e6%95%b0" aria-label="Anchor">#</a></span>        
    
</h6>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-vue" data-lang="vue"><span style="display:flex;"><span><span style="color:#a6e22e">watch</span>(()=&gt;<span style="color:#a6e22e">count</span>,(<span style="color:#a6e22e">newV</span>,<span style="color:#a6e22e">OldV</span>)=&gt;{
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">count</span>.<span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#a6e22e">newV</span>
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">OldV</span>)
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">count</span>)
</span></span><span style="display:flex;"><span>})
</span></span></code></pre></div><div id="生命周期函数" class="anchor"></div>
<h4 class="relative group">生命周期函数 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e5%87%bd%e6%95%b0" aria-label="Anchor">#</a></span>        
    
</h4>
<p>created和onMounted</p>
<p>对应关系</p>
<p>




  
  
    
  
  
    <figure>
      
      <img
        class="my-0 rounded-md"
        srcset="
        /entire-note/vue/img_4_hu7a7669fc8ca8e70a3aa12602986c717d_369240_330x0_resize_box_3.png 330w,
        /entire-note/vue/img_4_hu7a7669fc8ca8e70a3aa12602986c717d_369240_660x0_resize_box_3.png 660w,
        /entire-note/vue/img_4_hu7a7669fc8ca8e70a3aa12602986c717d_369240_1024x0_resize_box_3.png 1024w,
        /entire-note/vue/img_4_hu7a7669fc8ca8e70a3aa12602986c717d_369240_1320x0_resize_box_3.png 2x"
        src="/entire-note/vue/img_4_hu7a7669fc8ca8e70a3aa12602986c717d_369240_660x0_resize_box_3.png"
        alt="img_4.png"
      />
      
      
    </figure>
  

</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-vue" data-lang="vue"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">setup</span>&gt;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">onMounted</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;vue&#34;</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">onMounted</span>(()=&gt;{
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;生命周期函数1&#34;</span>)
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">onMounted</span>(()=&gt;{
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;生命周期函数2&#34;</span>)
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;
</span></span></code></pre></div><div id="父子通信" class="anchor"></div>
<h4 class="relative group">父子通信 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#%e7%88%b6%e5%ad%90%e9%80%9a%e4%bf%a1" aria-label="Anchor">#</a></span>        
    
</h4>
<p>父组件绑定属性传值给子组件，子组件通过props接收属性</p>
<p>编译器宏：defineProps</p>
<p>父组件动态动态传值：v-model</p>
<p>父组件形态：</p>
<p>




  
  
    
  
  
    <figure>
      
      <img
        class="my-0 rounded-md"
        srcset="
        /entire-note/vue/img_6_hue2d6eb9c2887f08f0285cec785cee916_69512_330x0_resize_box_3.png 330w,
        /entire-note/vue/img_6_hue2d6eb9c2887f08f0285cec785cee916_69512_660x0_resize_box_3.png 660w,
        /entire-note/vue/img_6_hue2d6eb9c2887f08f0285cec785cee916_69512_1024x0_resize_box_3.png 1024w,
        /entire-note/vue/img_6_hue2d6eb9c2887f08f0285cec785cee916_69512_1320x0_resize_box_3.png 2x"
        src="/entire-note/vue/img_6_hue2d6eb9c2887f08f0285cec785cee916_69512_660x0_resize_box_3.png"
        alt="img_6.png"
      />
      
      
    </figure>
  

</p>
<p>这张图片里面，所有的遗传属性需要在引用子组件的时候中声明，子组件定义的通信函数也要在引用时用**@+函数名**的方法声明！</p>
<p>子组件形态：</p>
<p>




  
  
    
  
  
    <figure>
      
      <img
        class="my-0 rounded-md"
        srcset="
        /entire-note/vue/img_7_hu83c02c4c4e115a96e620b38061a46c07_65891_330x0_resize_box_3.png 330w,
        /entire-note/vue/img_7_hu83c02c4c4e115a96e620b38061a46c07_65891_660x0_resize_box_3.png 660w,
        /entire-note/vue/img_7_hu83c02c4c4e115a96e620b38061a46c07_65891_1024x0_resize_box_3.png 1024w,
        /entire-note/vue/img_7_hu83c02c4c4e115a96e620b38061a46c07_65891_1320x0_resize_box_3.png 2x"
        src="/entire-note/vue/img_7_hu83c02c4c4e115a96e620b38061a46c07_65891_660x0_resize_box_3.png"
        alt="img_7.png"
      />
      
      
    </figure>
  

</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-vue" data-lang="vue"><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">setup</span>&gt;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">Son</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;@/components/heredity/Son.vue&#34;</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">ref</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;vue&#34;</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">money</span><span style="color:#f92672">=</span><span style="color:#a6e22e">ref</span>(<span style="color:#ae81ff">100</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">earnMoney</span><span style="color:#f92672">=</span>()=&gt;{
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">money</span>.<span style="color:#a6e22e">value</span><span style="color:#f92672">+=</span><span style="color:#ae81ff">100</span>
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">template</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span>&gt;&lt;<span style="color:#f92672">h3</span>&gt;<span style="color:#a6e22e">我是父组件</span>&lt;/<span style="color:#f92672">h3</span>&gt;&lt;<span style="color:#f92672">button</span> <span style="color:#f92672">@click</span><span style="color:#e6db74">=&#34;earnMoney&#34;</span>&gt;<span style="color:#a6e22e">赚钱给孩子们</span>&lt;/<span style="color:#f92672">button</span>&gt;&lt;<span style="color:#f92672">son</span> <span style="color:#a6e22e">car</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;宝马车&#34;</span> <span style="color:#f92672">:money</span><span style="color:#e6db74">=&#34;money&#34;</span>/&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">template</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">script</span> <span style="color:#a6e22e">setup</span>&gt;
</span></span><span style="display:flex;"><span><span style="color:#75715e">//编译器宏组件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span>  <span style="color:#a6e22e">props</span><span style="color:#f92672">=</span><span style="color:#a6e22e">defineProps</span>({
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">car</span><span style="color:#f92672">:</span> String,
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">money</span><span style="color:#f92672">:</span>String
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">script</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">template</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;son&#34;</span>&gt;<span style="color:#a6e22e">我是子组件</span>&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;son&#34;</span>&gt;<span style="color:#a6e22e">遗产</span>{{<span style="color:#a6e22e">car</span>}}&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;son&#34;</span>&gt;<span style="color:#a6e22e">父亲的遗产</span>{{<span style="color:#a6e22e">money</span>}}&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">template</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">style</span> <span style="color:#a6e22e">scoped</span>&gt;
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">son</span>{
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">border</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span><span style="color:#a6e22e">px</span> <span style="color:#a6e22e">solid</span> <span style="color:#a6e22e">black</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">padding</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">30</span><span style="color:#a6e22e">px</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">style</span>&gt;
</span></span></code></pre></div><div id="子组件传递事件给父组件" class="anchor"></div>
<h5 class="relative group">子组件传递事件给父组件 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e4%ba%8b%e4%bb%b6%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6" aria-label="Anchor">#</a></span>        
    
</h5>
<blockquote>
<p>理论上来讲，子组件修改父组件的值是可以的，但是由于父组件的可以引用多个子组件，其中一个子组件改了父组件的值后，
其他的子组件的数据可能会有问题，所以不推荐使用子组件修改父组件的值，而是在父组件中定义属性和方法，在子组件中修改。</p>
</blockquote>
<p>子组件内部通过emit触发事件，前提是子组件通过编译器宏声明了事件</p>
<p>子组件部分传递事件：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-vue" data-lang="vue"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">emit</span><span style="color:#f92672">=</span><span style="color:#a6e22e">defineEmits</span>([<span style="color:#e6db74">&#39;consumeMoney&#39;</span>])
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">consume</span><span style="color:#f92672">=</span>()=&gt;{
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">emit</span>(<span style="color:#e6db74">&#39;consumeMoney&#39;</span>,<span style="color:#ae81ff">5</span>)
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>父组件部分接受事件：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-latex" data-lang="latex"><span style="display:flex;"><span>//传入参数也可以接收
</span></span><span style="display:flex;"><span>const lessMoney=(args)=&gt;{
</span></span><span style="display:flex;"><span>  money.value-=args;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;son car=&#34;宝马车&#34; :money=&#34;money&#34; @consumeMoney=&#34;lessMoney&#34;/&gt;&lt;/div&gt;
</span></span></code></pre></div><p>




  
  
    
  
  
    <figure>
      
      <img
        class="my-0 rounded-md"
        srcset="
        /entire-note/vue/img_5_hu29a024c63a3334dc62834f684e4ed083_256618_330x0_resize_box_3.png 330w,
        /entire-note/vue/img_5_hu29a024c63a3334dc62834f684e4ed083_256618_660x0_resize_box_3.png 660w,
        /entire-note/vue/img_5_hu29a024c63a3334dc62834f684e4ed083_256618_1024x0_resize_box_3.png 1024w,
        /entire-note/vue/img_5_hu29a024c63a3334dc62834f684e4ed083_256618_1320x0_resize_box_3.png 2x"
        src="/entire-note/vue/img_5_hu29a024c63a3334dc62834f684e4ed083_256618_660x0_resize_box_3.png"
        alt="img_5.png"
      />
      
      
    </figure>
  

</p>
<div id="模板引用" class="anchor"></div>
<h4 class="relative group">模板引用 
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
        <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
            style="text-decoration-line: none !important;" href="#%e6%a8%a1%e6%9d%bf%e5%bc%95%e7%94%a8" aria-label="Anchor">#</a></span>        
    
</h4>
<p>ref标识获取dom或者组件实例</p>
<p>创建-&gt;绑定-&gt;使用</p>

            </div>

            

            
  
  <section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
    
      
    
      
      <a
      target="_blank"
      class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
      href="https://twitter.com/intent/tweet/?url=/entire-note/vue/&amp;text=Vue3%20%e5%93%8d%e5%ba%94%e5%bc%8fApi%e5%bc%80%e5%8f%91%e7%ac%94%e8%ae%b0"
      title="Tweet on Twitter"
      aria-label="Tweet on Twitter"
      >
      

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
  </span>


    </a>
      
    
      
      <a
      target="_blank"
      class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
      href="https://t.me/share/url?url=/entire-note/vue/&amp;resubmit=true&amp;title=Vue3%20%e5%93%8d%e5%ba%94%e5%bc%8fApi%e5%bc%80%e5%8f%91%e7%ac%94%e8%ae%b0"
      title=""
      aria-label=""
      >
      

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>

  </span>


    </a>
      
    
      
      <a
      target="_blank"
      class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
      href="mailto:?body=/entire-note/vue/&amp;subject=Vue3%20%e5%93%8d%e5%ba%94%e5%bc%8fApi%e5%bc%80%e5%8f%91%e7%ac%94%e8%ae%b0"
      title="Send via email"
      aria-label="Send via email"
      >
      

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>

  </span>


    </a>
      
    
  </section>


            


<h2 class="mt-8 text-2xl font-extrabold mb-10">Related</h2>
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
  
  

  <a href="/entire-note/%E5%9B%BE%E5%BA%8A/" class="min-w-full">
    
    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
        
        <div class="w-full thumbnail_card_related nozoom" style="background-image:url(/entire-note/%E5%9B%BE%E5%BA%8A/featured_hu4038ae6a3874421a74084ffa05a18d88_795825_600x0_resize_box_3.png);"></div>
        
      

      <div class="px-6 py-4">

        
        <div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
          href="/entire-note/%E5%9B%BE%E5%BA%8A/">搭建图床</div>
        

        <div class="text-sm text-neutral-500 dark:text-neutral-400">
          

































<div class="flex flex-row flex-wrap items-center">
  
  
  <span title="Reading time">1 min</span><span class="px-2 text-primary-500">&middot;</span><span>
    
    <span id="views_entire-note\图床\index.md" title="views">0</span> 
    
    <span class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg>
  </span>

</span>
</span><span class="px-2 text-primary-500">&middot;</span><span>
    
    <span id="likes_entire-note\图床\index.md" title="likes">0</span> 
    
    <span class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>
  </span>

</span>
</span>
  

  
  
</div>


<div class="flex flex-row flex-wrap items-center">
  
  
  
  
  
  
  
  
  
  
  
</div>




<div class="flex flex-row flex-wrap items-center">
  
  
  
  
  
  
  
  
  
  
  
  
  <span style="margin-top:0.5rem" class="mr-2" onclick="window.open(&#34;/tags/%E7%AC%94%E8%AE%B0/&#34;,'_self');">
    <span class="flex">
  <span
    class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
  >
    笔记
  </span>
</span>

  </span>
  
  
  
  
</div>



        </div>

        
      </div>
      <div class="px-6 pt-4 pb-2">

      </div>
    </div>
  </a>
  
  

  <a href="/entire-note/c&#43;&#43;/" class="min-w-full">
    
    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
        
        <div class="w-full thumbnail_card_related nozoom" style="background-image:url(/img/default_bg_hu2c8ae63088ae0a9e08ad1099ffefae54_137932_600x0_resize_q75_box.jpg);"></div>
        
      

      <div class="px-6 py-4">

        
        <div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
          href="/entire-note/c&#43;&#43;/">C++</div>
        

        <div class="text-sm text-neutral-500 dark:text-neutral-400">
          

































<div class="flex flex-row flex-wrap items-center">
  
  
  <span title="Reading time">6 mins</span><span class="px-2 text-primary-500">&middot;</span><span>
    
    <span id="views_entire-note\C&#43;&#43;\index.md" title="views">0</span> 
    
    <span class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg>
  </span>

</span>
</span><span class="px-2 text-primary-500">&middot;</span><span>
    
    <span id="likes_entire-note\C&#43;&#43;\index.md" title="likes">0</span> 
    
    <span class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>
  </span>

</span>
</span>
  

  
  
</div>


<div class="flex flex-row flex-wrap items-center">
  
  
  
  
  
  
  
  
  
  
  
</div>




<div class="flex flex-row flex-wrap items-center">
  
  
  
  
  
  
  
  
  
  
  
  
  <span style="margin-top:0.5rem" class="mr-2" onclick="window.open(&#34;/tags/%E8%AF%AD%E8%A8%80/&#34;,'_self');">
    <span class="flex">
  <span
    class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
  >
    语言
  </span>
</span>

  </span>
  
  
  
  
</div>



        </div>

        
      </div>
      <div class="px-6 pt-4 pb-2">

      </div>
    </div>
  </a>
  
  

  <a href="/entire-note/%E9%9D%A2%E8%AF%95%E9%A2%98/" class="min-w-full">
    
    <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur">
        
        <div class="w-full thumbnail_card_related nozoom" style="background-image:url(/entire-note/%E9%9D%A2%E8%AF%95%E9%A2%98/featured_hudb063fd96b0863c8427eb25f55b23049_1428542_600x0_resize_box_3.png);"></div>
        
      

      <div class="px-6 py-4">

        
        <div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
          href="/entire-note/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</div>
        

        <div class="text-sm text-neutral-500 dark:text-neutral-400">
          

































<div class="flex flex-row flex-wrap items-center">
  
  
  <span title="Reading time">1 min</span><span class="px-2 text-primary-500">&middot;</span><span>
    
    <span id="views_entire-note\面试题\index.md" title="views">0</span> 
    
    <span class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg>
  </span>

</span>
</span><span class="px-2 text-primary-500">&middot;</span><span>
    
    <span id="likes_entire-note\面试题\index.md" title="likes">0</span> 
    
    <span class="inline-block align-text-bottom">

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>
  </span>

</span>
</span>
  

  
  
</div>


<div class="flex flex-row flex-wrap items-center">
  
  
  
  
  
  
  
  
  
  
  
</div>




<div class="flex flex-row flex-wrap items-center">
  
  
  
  
  
  
  
  
  
  
  
  
  <span style="margin-top:0.5rem" class="mr-2" onclick="window.open(&#34;/tags/%E9%9D%A2%E8%AF%95%E9%A2%98/&#34;,'_self');">
    <span class="flex">
  <span
    class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
  >
    面试题
  </span>
</span>

  </span>
  
  
  
  
</div>



        </div>

        
      </div>
      <div class="px-6 pt-4 pb-2">

      </div>
    </div>
  </a>
  
</section>


        </div>

        <script>
            var oid = "views_entire-note\\vue\\index.md"
            var oid_likes = "likes_entire-note\\vue\\index.md"
        </script>
        
        
        <script type="text/javascript" src="/js/page.min.0e49973b4ad0a382c7c6012d8bff8226316642daabc4f8a20477bd08674f3da6e2fa993bc20ad4f51e7c5bb68e6f913a207a7c4fe37ea0e7b806894afce0a64e.js" integrity="sha512-DkmXO0rQo4LHxgEti/&#43;CJjFmQtqrxPiiBHe9CGdPPabi&#43;pk7wgrU9R58W7aOb5E6IHp8T&#43;N&#43;oOe4BolK/OCmTg=="></script>

    </section>
    <footer class="pt-8 max-w-prose print:hidden">

        
  
    
    
    
    <div class="pt-8">
      <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
      <div class="flex justify-between pt-3">
        <span>
          
            <a class="flex group mr-3" href="/entire-note/%E5%9B%BE%E5%BA%8A/">
              <span
                class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
                >&larr;</span
              >
              <span
                class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
                >&rarr;</span
              >
              <span class="flex flex-col">
                <span
                  class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
                  >搭建图床</span
                >
                <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
                  
                </span>
              </span>
            </a>
          
        </span>
        <span>
          
            <a class="flex text-right group ml-3" href="/entire-note/mq/">
              <span class="flex flex-col">
                <span
                  class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
                  >RabbitMq</span
                >
                <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
                  
                </span>
              </span>
              <span
                class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
                >&rarr;</span
              >
              <span
                class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
                >&larr;</span
              >
            </a>
          
        </span>
      </div>
    </div>
  


        
        
        <div class="pt-3">
            <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
            <div class="pt-3">
                <script src="https://giscus.app/client.js"
        data-repo="ToDreamr/todreamr.github.io"
        data-repo-id="R_kgDOKdiu4A"
        data-category="Announcements"
        data-category-id="DIC_kwDOKdiu4M4Capsk"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

            </div>
        </div>
        
        
    </footer>
</article>

      <div id="top-scroller" class="pointer-events-none absolute top-[110vh] bottom-0 w-12 ltr:right-0 rtl:left-0">
  <a href="#the-top"
    class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 mb-16 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
    aria-label="Scroll to top" title="Scroll to top">
    &uarr;
  </a>
</div>
    </main><footer id="site-footer" class="py-10 print:hidden">
  
  
    
    <nav class="flex flex-row pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400">
      <ul class="flex flex-col list-none sm:flex-row">
        
        <li class="flex mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
          <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="/tags/"
            title="Tags">Tags</a>
        </li>
        
        <li class="flex mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
          <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="/authors/"
            title="Authors">Authors</a>
        </li>
        
      </ul>
    </nav>
    
  
  <div class="flex items-center justify-between">

    
    
    <p class="text-sm text-neutral-500 dark:text-neutral-400">
      &copy;
      2024
      春江花朝秋月夜
    </p>
    

    
    
    <p class="text-xs text-neutral-500 dark:text-neutral-400">
      
      
      Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
        href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a> &amp; <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
        href="https://blowfish.page/" target="_blank" rel="noopener noreferrer">Blowfish</a>
    </p>
    

  </div>
  <script>
    
    mediumZoom(document.querySelectorAll("img:not(.nozoom)"), {
      margin: 24,
      background: 'rgba(0,0,0,0.5)',
      scrollOffset: 0,
    })
    
  </script>
  
  
  <script type="text/javascript" src="/js/process.min.35c1113bcc16c5a59bf031082f9e63822aa95280423881a7847a7ff33a16e6299ce6a840d9ef4e10d947e030a18f3f20359afb2ec0f35967484b9a9360ac3145.js" integrity="sha512-NcERO8wWxaWb8DEIL55jgiqpUoBCOIGnhHp/8zoW5imc5qhA2e9OENlH4DChjz8gNZr7LsDzWWdIS5qTYKwxRQ=="></script>
  
  
</footer><div
  id="search-wrapper"
  class="invisible fixed inset-0 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]"
  data-url="/"
  style="z-index:500"
>
  <div
    id="search-modal"
    class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"
  >
    <header class="relative z-10 flex items-center justify-between flex-none px-2">
      <form class="flex items-center flex-auto min-w-0">
        <div class="flex items-center justify-center w-8 h-8 text-neutral-400">
          

  <span class="relative block icon">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>

  </span>


        </div>
        <input
          type="search"
          id="search-query"
          class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent"
          placeholder="Search"
          tabindex="0"
        />
      </form>
      <button
        id="close-search-button"
        class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
        title="Close (Esc)"
      >
        

  <span class="relative block icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>

  </span>


      </button>
    </header>
    <section class="flex-auto px-2 overflow-auto">
      <ul id="search-results">
        
      </ul>
    </section>
  </div>
</div>

  </div>
</body>

</html>
